<template>
  <div class="label-box">
    <p>{{info}}</p>
    <yun-icon name="close2" size="10px" color="#BBB" @click.native="handleDelete"></yun-icon>
  </div>
</template>

<script>
export default {
  name: "labelWrap",
  props: {
    info: String,
    index: Number
  },
  methods: {
    handleDelete(){
      this.$emit('deletelabel', this.index);
    }
  }
}
</script>

<style lang="scss" scoped>
  .label-box{
    display: inline-block;
    margin-right: 16*$length;
    @extend %cursorPointer;
    &:hover{
      > p{
        color: #00AAE6;
      }
    }
    > p {
      display: inline-block;
      @include fontStyle(12,16,500,#999,left);
    }
  }
</style>
